<template>
	<view>
		<navbar :titleText="'填写服务订单'"></navbar>
		<view class="od-banner" style="margin-top: 130rpx;">
		    <image class="od-banner-icon" src="/static/od_bg_icon.png" mode="widthFix" />
		    <view class="od-jd od-jd-0">
		        <view class="od-jd-out">
		            <view class="od-jd-in"></view>
		        </view>
		        <view class="vp-flex od-jd-text">
		            <view class="vp-flex_1">
		                <text class="od-jd-st-0">填写订单</text>
		            </view>
		            <view class="vp-flex_1">
		                <text class="od-jd-st-10">在线支付</text>
		            </view>
		            <view class="vp-flex_1">
		                <text class="od-jd-st-20">专人服务</text>
		            </view>
		            <view class="vp-flex_1">
		                <text class="od-jd-st-30">服务完成</text>
		            </view>
		        </view>
		    </view>
		</view>
		<block v-if="service.stype == 10 || service.stype == 15 || service.stype == 20">
			<view class="pub-box">
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<image class="serv-icon"
								:src="service.icon_image ? service.icon_image_url : '../../static/avatar.jpg'">
							</image>
						</view>
						<view class="weui-cell__bd">
							<text class="serv-name">{{ service.name }}</text>
						</view>
						<view class="weui-cell__ft">
							<view class="f5 ic_info" @click="handleTap">服务内容</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pub-box">
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">就诊医院</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<picker @change="onHospitalChange" :value="hospital_index" :range="hospitals"
									range-key="name">
									<input type="text" :disabled="true" placeholder="请选择要就诊的医院"
										:value="hospitals[hospital_index].name" placeholder-class="vp-placeholder" />
								</picker>
							</view>
						</view>
					</view>
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">就诊时间</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<dtPicker @dtPickerChanged="onStartTimeChanged" :timestamp="order.starttime"
									placeholder="请选择就诊时间"></dtPicker>
							</view>
						</view>
					</view>
					<view class="weui-cell weui-cell_input" @click="onClientChange">
						<view class="weui-cell__hd">
							<view class="weui-label">就诊人</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<input class="weui-input" placeholder-class="vp-placeholder" placeholder="请选择就诊人"
									style="text-align: right;" :disabled="true" :value="client.name" type="text">
							</view>
						</view>
					</view>
					<block v-if="service.stype == 15">
						<!-- 接送陪诊 -->
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">接送地址</view>
							<view class="weui-cell__bd">
								<input class="weui-input" name="receiveAddress" style="text-align: right"
									placeholder-class="vp-placeholder" placeholder="请填写就诊人所在地址" v-model="order.receiveAddress" />
							</view>
						</view>
					</block>

					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">联系电话</view>
						<view class="weui-cell__bd">
							<input class="weui-input" type="number" name="tel" style="text-align: right"
								placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="order.tel" />
						</view>
					</view>
				</view>
			</view>
			<view class="pub-box">
				<view class="pub-box-tt">服务需求</view>
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__bd">
							<textarea name="demand" auto-height placeholder="请简单描述您要就诊的科室.."
								placeholder-class="vp-placeholder" style="min-height: 150rpx" v-model="order.demand" />
						</view>
					</view>
				</view>
		    </view>
		</block>
		<block v-if="service.stype == 30 || service.stype == 40">
		    <!-- 送取结果,代跑取药 -->
		    <view class="pub-box">
		        <view class="pub-box-bd">
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__hd">
		                    <view class="weui-label">所在医院</view>
		                </view>
		                <view class="weui-cell__bd"></view>
		                <view class="weui-cell__ft weui-cell__ft_in-access">
		                    <view>
		                        <picker @change="onHospitalChange" :value="hospital_index" :range="hospitals"
		                            range-key="name">
		                            <input type="text" :disabled="true" placeholder="请选择就诊所在医院"
		                                :value="hospitals[hospital_index].name" placeholder-class="vp-placeholder" />
		                        </picker>
		                    </view>
		                </view>
		            </view>
		
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__hd">
		                    <view class="weui-label">服务时间</view>
		                </view>
		                <view class="weui-cell__bd"></view>
		                <view class="weui-cell__ft weui-cell__ft_in-access">
		                    <view>
		                        <dtPicker @dtPickerChanged="onStartTimeChanged" :timestamp="order.starttime"
		                            placeholder="请选择期望服务时间"></dtPicker>
		                    </view>
		                </view>
		            </view>
		
		            <view class="weui-cell weui-cell_input" @click="onAddressChange">
		                <view class="weui-cell__hd">
		                    <view class="weui-label">收件信息</view>
		                </view>
		                <view class="weui-cell__bd"></view>
		                <view class="weui-cell__ft weui-cell__ft_in-access">
		                    <input class="weui-input" :disabled="true" style="text-align: right"
		                        placeholder-class="vp-placeholder" placeholder="请选择收件信息" :value="
		                                                        order.address.userName
		                                                            ? order.address.userName + '(' + order.address.cityName + order.address.countyName + order.address.detailInfo + ')'
		                                                            : ''
		                                                    " />
		                    <!-- {{order.address?(order.address.userName+'('+order.address.telNumber+')'):''}} -->
		                </view>
		            </view>
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__hd">联系电话</view>
		                <view class="weui-cell__bd">
		                    <input class="weui-input" type="number" name="tel" style="text-align: right"
		                        placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="order.tel" />
		                </view>
		            </view>
		        </view>
		    </view>
		
		    <view class="pub-box">
		        <view class="pub-box-tt">服务需求</view>
		        <view class="pub-box-bd">
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__bd">
		                    <textarea name="demand" auto-height placeholder="如有其他服务要求请在此填写.."
		                        placeholder-class="vp-placeholder" style="min-height: 150rpx" v-model="order.demand" />
		                </view>
		            </view>
		        </view>
		    </view>
		</block>
		<block v-if="service.stype == 110">
		    <!-- 上门服务 -->
		    <view class="pub-box">
		        <view class="pub-box-bd">
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__hd">
		                    <view class="weui-label">服务时间</view>
		                </view>
		                <view class="weui-cell__bd"></view>
		                <view class="weui-cell__ft weui-cell__ft_in-access">
		                    <view>
		                        <dtPicker @dtPickerChanged="onStartTimeChanged" :timestamp="order.starttime"
		                            placeholder="请选择期望服务时间"></dtPicker>
		                    </view>
		                </view>
		            </view>
		
		            <view class="weui-cell weui-cell_input" @click="onClientChange">
		                <view class="weui-cell__hd">服务对象</view>
		                <view class="weui-cell__bd"></view>
		                <view class="weui-cell__ft weui-cell__ft_in-access">
		                    <input class="weui-input" :disabled="true" style="text-align: right"
		                        placeholder-class="vp-placeholder" placeholder="请选择服务对象" :value="client.name" />
		                </view>
		            </view>
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__hd">服务地址</view>
		                <view class="weui-cell__bd">
		                    <input class="weui-input" name="receiveAddress" style="text-align: right"
		                        placeholder-class="vp-placeholder" placeholder="请填写服务所在地址" v-model="order.receiveAddress" />
		                </view>
		            </view>
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__hd">联系电话</view>
		                <view class="weui-cell__bd">
		                    <input class="weui-input" type="number" name="tel" style="text-align: right"
		                        placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="order.tel" />
		                </view>
		            </view>
		        </view>
		    </view>
		
		    <view class="pub-box">
		        <view class="pub-box-tt">服务需求</view>
		        <view class="pub-box-bd">
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__bd">
		                    <textarea name="demand" auto-height placeholder="请简单描述您要就诊的科室.."
		                        placeholder-class="vp-placeholder" style="min-height: 150rpx" v-model="order.demand" />
		                </view>
		            </view>
		        </view>
		    </view>
		</block>
		<view style="height: 300rpx"></view>
		<!-- 悬浮提交按钮 -->
		<view class="vp-foot">
		    <view style="background: #ffffff; padding: 20rpx">
		        <view class="xieyi" style="text-align: center">
		            <text :class="'is_xieyi ' + (is_xieyi ? 'is_xieyi_on' : '')" @click="onXieyiChange">我已阅读并同意</text>
		            <navigator :url="cfg.page_xy">《用户协议》</navigator>
		            <text>和</text>
		            <navigator :url="cfg.page_fw">《服务协议》</navigator>
		        </view>
		        <view>
		            <button :class="'btnp ' + (is_xieyi ? '' : 'btnp-disabled')" @click="submit">
		                确认下单
		                <block v-if="order.price > 0">（支付{{ order.price }}元）</block>
		            </button>
		        </view>
		    </view>
		</view>
		<!-- <uni-popup ref="popup" type="center" :is-mask-click="false" background-color="#fff">
		    <view class="popup-content">
		        <view class="group">
		            <input class="uni-input" type="tel" v-model="validMobile.phone" placeholder="手机号" />
		        </view>
		        <view class="group">
		            <input class="uni-input" v-model="validMobile.validCode" placeholder="验证码" />
		            <text class="valid-text" @click="countdownChange">{{countdown.validText}}</text>
		        </view>
		    </view>
		    <view class="btns">
		        <view class="cancal" @click="cancal">取消</view>
		        <view class="ok" @click="ok">确定</view>
		    </view>
		</uni-popup> -->
	</view>
</template>

<script setup>
	import{ref, reactive, computed, toRaw} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	
	const app = getApp()
	
	
	onLoad((options)=>{
		init(options)
	})
	
	const service = ref({})
	
	const hospitals = ref([{}])
	const hospital_index = ref(0)
	
	const cfg = ref({})
	
	const countdown = ref({})
	
	const client = reactive({
		name:'',
		id:'',
		sex:'',
		age:0
	})
	
	const is_xieyi = ref(false)
	
	const order = reactive({
		price:'',
		starttime:'',
		address:{
			userName:'',
			cityName:'',
			countyName:'',
			detailInfo:''
		}
	})
	
	const validMobile = reactive({
		phone:'',
		validCode:''
	})
	
	const init = (options)=>{
		app.globalData.utils.request({
			url:'/Service/order',
			data: {
				svid:options.svid
			},
			success:(res)=>{
				service.value = res.data.data.service
				hospitals.value = res.data.data.hospitals
				console.log(hospitals)
				
				const hospital_data = toRaw(hospitals.value)
				if(options.hid > 0){
					// 自行选中
					for(let i = 0; i < hospital_data.length; i++){
						if(options.hid == hospital_data[i].id){
							hospital_index.value = i
							console.log(hospital_index)
							order.price = hospital_data[i].service_price
							break
						}
					}
				}
			}
		})
	}
	const handleTap = ()=>{
		
	}
	
	const onHospitalChange = (e)=>{
		const value = parseInt(e.detail.value)
		
		const hospital_data = toRaw(hospitals.value)
		for(let i = 0; i < hospital_data.length; i++){
			if(value == hospital_data[i].id){
				hospital_index.value = i
				order.price = hospital_data[i].service_price
				break
			}
		}
	}
	const onStartTimeChanged = (e) =>{
		order.starttime = e.detail.value
	}
	
	const onClientChange = (e) =>{
		uni.navigateTo({
			url:'/pages/clients/clients?act=select'
		})
	}
	
	const onXieyiChange = (e)=>{
		if(is_xieyi.value){
			is_xieyi.value = false;
		}else{
			is_xieyi.value = true
		}
	}
	
	const onAddressChange = ()=>{
		uni.chooseAddress({
			success: (res) => {
				order.address.cityName = res.cityName
				order.address.countyName = res.countyName
				order.address.detailInfo = res.detailInfo
				order.address.userName = res.userName
			},
			fail: (err) => {
				
			}
		})
	}
	
	const submit = ()=>{
		if(!is_xieyi){
			return uni.showToast({
				title:'请先阅读并同意用户协议和服务协议',
				icon:'none',
				duration:1000
			})
		}
		
		const orderData = toRaw(order)
		const serviceData = toRaw(service.value)
		const hospitalData = toRaw(hospitals.value)
		const clientData = toRaw(client)
		
		if(serviceData.stype < 100){
			if(hospital_index.value == 0){
				return uni.showToast({
					title:'请先选择医院',
					icon:'none',
					duration:1000
				})
			}
			orderData.hospital_id = hospitalData[hospital_index.value].id
			orderData.hospital_name = hospitalData[hospital_index.value].name
		}
		
		// 就诊时间
		if(!orderData.starttime){
			return uni.showToast({
				title:'请选择就诊时间',
				icon:'none',
				duration:1000
			})
		}
		
		
		if(serviceData.stype == 10 || serviceData == 15 || serviceData == 20){
			if(!clientData.id){
				return uni.showToast({
					title:'请填写就诊人',
					icon:'none',
					duration:1000
				})
			}
			orderData.client = {}
			orderData.client.age = clientData.age
			orderData.client.mobile = clientData.mobile
			orderData.client.name = clientData.name
			orderData.client.sex = clientData.sex
			
			// 接送地址的验证
			if(serviceData.stype == 15){
				if(!orderData.receiveAddress){
					return uni.showToast({
						title:'请填写接送地址',
						icon:'none',
						duration:1000
					})
				}
				
			}
		}
		
		if(serviceData.stype == 30 || serviceData == 40){
			if(!orderData.address.userName){
				return uni.showToast({
					title:'请填写收件信息',
					icon:'none',
					duration:1000
				})
			}
		}
		
		// 判断联系电话
		if(!orderData.tel){
			return uni.showToast({
				title:'请填写您的联系方式',
				icon:'none',
				duration:1000
			})
		}
		
		
	}
	
	uni.$on('clientSelect', (data)=>{
		client.id = data.user_id
		client.name = data.name
		client.sex = data.sex
		client.age = data.age
		client.mobile = data.mobile
	})
</script>

<style>
	page {
	    background: #f0f0f0;
	}
	
	.weui-cells {
	    margin: 0;
	}
	.weui-cell {
	    padding: 20rpx;
	}
	.weui-cells::before {
	    display: none;
	}
	.weui-label {
	    width: auto;
	}
	.weui-cell__ft {
	    color: #353535;
	}
	.weui-cell__ft text {
	    color: #353535;
	}
	
	.od-banner {
	    overflow: hidden;
	    position: relative;
	    background: url()
	        repeat-y center;
	    background-size: 100%;
	}
	.od-banner-icon {
	    position: absolute;
	    top: 30rpx;
	    right: -20rpx;
	    width: 130rpx;
	    opacity: 0.6;
	}
	
	.od-jd {
	    margin: 60rpx 40rpx;
	}
	.od-jd-out {
	    background: #ffffff;
	    border: 5rpx solid #ffffff;
	    height: 20rpx;
	    line-height: 20rpx;
	    border-radius: 50rpx;
	    overflow: hidden;
	    position: relative;
	}
	.od-jd-in {
	    height: 20rpx;
	    line-height: 20rpx;
	    border-radius: 50rpx;
	    overflow: hidden;
	    width: 0%;
	    background: url()
	        repeat-y center;
	    background-size: 100%;
	}
	.od-jd-text {
	    text-align: center;
	    padding-top: 30rpx;
	}
	.od-jd-text text {
	    color: #ffffff;
	    font-size: 26rpx;
	    opacity: 0.7;
	}
	
	.od-jd-0 .od-jd-in {
	    width: 12%;
	}
	.od-jd-0 .od-jd-st-0 {
	    opacity: 1;
	    font-weight: bold;
	}
	.od-jd-10 .od-jd-in {
	    width: 37%;
	}
	.od-jd-10 .od-jd-st-10 {
	    opacity: 1;
	    font-weight: bold;
	}
	.od-jd-20 .od-jd-in {
	    width: 64%;
	}
	.od-jd-20 .od-jd-st-20 {
	    opacity: 1;
	    font-weight: bold;
	}
	.od-jd-30 .od-jd-in {
	    width: 100%;
	}
	.od-jd-30 .od-jd-st-30 {
	    opacity: 1;
	    font-weight: bold;
	}
	.od-jd-40 .od-jd-in {
	    width: 100%;
	    background: #999999;
	}
	
	.serv-icon {
	    display: block;
	    width: 50rpx;
	    height: 50rpx;
	    margin: 15rpx 15rpx 15rpx 0;
	}
	.serv-name {
	    font-weight: bold;
	}
	
	.pub-box {
	    margin: 20rpx;
	    position: relative;
	}
	.pub-box-tt {
	    height: 80rpx;
	    line-height: 80rpx;
	    position: relative;
	    padding-left: 10rpx;
	}
	.pub-box-tt text {
	    font-size: 24rpx;
	}
	.pub-box-ttl {
	    padding-left: 10rpx;
	}
	.pub-box-ttl text {
	    color: #888888;
	}
	.pub-box-ttr {
	    position: absolute;
	    right: 10rpx;
	    top: 0;
	    height: 80rpx;
	    line-height: 80rpx;
	}
	.pub-box-ttr text {
	    color: #576b95;
	}
	.pub-box-bd {
	    border: 1rpx solid #eeeeee;
	    border-radius: 10rpx;
	    overflow: hidden;
	    background: #ffffff;
	    position: relative;
	}
	.pub-box-bd .weui-cell::before {
	    left: 20rpx;
	}
	
	.xieyi {
	    text-align: center;
	    padding-bottom: 20rpx;
	}
	.xieyi text {
	    font-size: 28rpx;
	}
	.xieyi navigator {
	    font-size: 28rpx;
	    display: inline-block;
	    color: #0bb684;
	}
	.is_xieyi {
	    display: inline-block;
	    padding-left: 36rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 30rpx;
	}
	.is_xieyi_on {
	    background-image: url();
	}
	.popup-content {
		width: 600rpx;
		height: 260rpx;
		padding: 20rpx;
	}
	.popup-content .group {
		margin: 20rpx;
		display: flex;
	}
	.popup-content .group input {
		padding-left: 10rpx;
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;
	}
	.popup-content .group .valid-text {
		width: 230rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #409eff;
	}
	.btns {
		display: flex;
		border-top:2rpx solid #f5f5f5;
	}
	.btns view{
		flex: 1;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}
	.btns .cancal {
		border-right: 2rpx solid #f5f5f5;
	}
	.btns .ok{
		color: #ee0a24;
	}
	.uni-popup__wrapper {
		border-radius: 20rpx;
	}
	.text-center {
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.pay-box {
		padding: 40rpx;
	}
	.pay-box canvas {
		margin: 0 auto;
	}
</style>
